<template>
  <div class="app-container" style="padding: 5px;">
    <el-card>
      <div slot="header" class="clearfix">
        <span style="font-weight: bold;color: #0099ff;font-size: 16px;">客户下单数据全览</span>
      </div>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px" label-position="top">
        <el-form-item label="部门" prop="bigdpt">
          <el-select v-model="queryParams.bigdpt" filterable @change="handleChange" :disabled="queryFlag">
            <el-option v-for="item in bigdpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="片区" prop="dpt">
          <el-select v-model="queryParams.dpt" filterable @change="handleChange" :disabled="queryFlag">
            <el-option v-for="item in dpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户类型" prop="dptcls">
          <el-select v-model="queryParams.dptcls" filterable @change="handleChange">
            <el-option v-for="item in dptclss" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="8">
          <div ref="chart1" style="width: 100%;height:300px;"></div>
        </el-col>
        <el-col :span="8">
          <div ref="chart2" style="width: 100%;height:300px;"></div>
        </el-col>
        <el-col :span="8">
          <div ref="chart3" style="width: 100%;height:300px;"></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div ref="chart4" style="width: 100%;height:300px;"></div>
        </el-col>
        <el-col :span="8">
          <div ref="chart5" style="width: 100%;height:300px;"></div>
        </el-col>
        <el-col :span="8">
          <div ref="chart6" style="width: 100%;height:300px;"></div>
        </el-col>
      </el-row>
    </el-card>

    <el-card style="margin-top: 10px;">
      <div slot="header" class="clearfix">
        <span style="font-weight: bold;color: #0099ff;font-size: 16px;">客户下单数据(细化到一级品类)</span>
      </div>
      <el-form :model="queryParams1" ref="queryForm1" size="small" :inline="true" label-width="80px" label-position="top">
        <el-form-item label="部门" prop="bigdpt">
          <el-select v-model="queryParams1.bigdpt" filterable @change="handleChange1" :disabled="queryFlag1">
            <el-option v-for="item in bigdpts1" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="片区" prop="dpt">
          <el-select v-model="queryParams1.dpt" filterable @change="handleChange1" :disabled="queryFlag1">
            <el-option v-for="item in dpts1" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户类型" prop="dptcls">
          <el-select v-model="queryParams1.dptcls" filterable @change="handleChange1">
            <el-option v-for="item in dptclss1" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="一级品类" prop="brand">
          <el-select v-model="queryParams1.brand" filterable @change="handleChange1">
            <el-option v-for="item in brands1" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="8">
          <div ref="chart7" style="width: 100%;height:300px;"></div>
        </el-col>
        <el-col :span="8">
          <div ref="chart8" style="width: 100%;height:300px;"></div>
        </el-col>
        <el-col :span="8">
          <div ref="chart9" style="width: 100%;height:300px;"></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div ref="chart10" style="width: 100%;height:300px;"></div>
        </el-col>
        <el-col :span="8">
          <div ref="chart11" style="width: 100%;height:300px;"></div>
        </el-col>
        <el-col :span="8">
          <div ref="chart12" style="width: 100%;height:300px;"></div>
        </el-col>
      </el-row>
    </el-card>
    <el-card style="margin-top: 10px;">
      <div slot="header" class="clearfix">
        <span style="font-weight: bold;color: #0099ff;font-size: 16px;">购买明细（客户维度）</span>
      </div>
      <el-form :model="queryParams2" ref="queryForm2" size="small" :inline="true" label-width="80px" label-position="top">
        <el-form-item label="部门" prop="bigdpt">
          <el-select v-model="queryParams2.bigdpt" filterable @change="handleChange2" :disabled="queryFlag2">
            <el-option v-for="item in bigdpts2" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="片区" prop="dpt">
          <el-select v-model="queryParams2.dpt" filterable @change="handleChange2" :disabled="queryFlag2">
            <el-option v-for="item in dpts2" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户类型" prop="dptcls">
          <el-select v-model="queryParams2.dptcls" filterable @change="handleChange2">
            <el-option v-for="item in dptclss2" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="一级品类" prop="brand">
          <el-select v-model="queryParams2.brand" filterable @change="handleChange2">
            <el-option v-for="item in brands2" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户姓名" prop="kh_name">
          <el-input v-model="queryParams2.kh_name" clearable @keyup.enter.native="handleChange2" />
        </el-form-item>
        <el-form-item label="订单状态" prop="ddstate">
          <el-select v-model="queryParams2.ddstate" filterable @change="handleChange2">
            <el-option v-for="item in ddstates2" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <el-table :data="detailList" border stripe >
        <el-table-column label="客户名字" align="center" prop="kh_name">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-view" @click="showKhInfo(scope.row)" title="查看客户资质信息">{{ scope.row.kh_name }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="新老客户" align="center" prop="n_o_cus">
          <template slot-scope="scope">
            <span v-if="scope.row.n_o_cus=='new'">新客户</span>
            <span v-if="scope.row.n_o_cus=='old'">老客户</span>
          </template>
        </el-table-column>
        <el-table-column label="前任销售" align="center" prop="qr"></el-table-column>
        <el-table-column label="现任销售" align="center" prop="xr"></el-table-column>
        <el-table-column label="订单数" align="center">
          <el-table-column label="四年前" align="center" prop="y5order">
            <template slot-scope="scope">
              <span v-if="scope.row.y5order=='0'"></span>
              <span v-if="scope.row.y5order!='0'">{{ scope.row.y5order }}</span>
            </template>
          </el-table-column>
          <el-table-column label="三年前" align="center" prop="y4order">
            <template slot-scope="scope">
              <span v-if="scope.row.y4order=='0'"></span>
              <span v-if="scope.row.y4order!='0'">{{ scope.row.y4order }}</span>
            </template>
          </el-table-column>
          <el-table-column label="两年前" align="center" prop="y3order">
            <template slot-scope="scope">
              <span v-if="scope.row.y3order=='0'"></span>
              <span v-if="scope.row.y3order!='0'">{{ scope.row.y3order }}</span>
            </template>
          </el-table-column>
          <el-table-column label="一年前" align="center" prop="y2order">
            <template slot-scope="scope">
              <span v-if="scope.row.y2order=='0'"></span>
              <span v-if="scope.row.y2order!='0'">{{ scope.row.y2order }}</span>
            </template>
          </el-table-column>
          <el-table-column label="近一年" align="center" prop="y1order">
            <template slot-scope="scope">
              <span v-if="scope.row.y1order=='0'"></span>
              <span v-if="scope.row.y1order!='0'">{{ scope.row.y1order }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="平均每单成交额" align="center">
          <el-table-column label="四年前" align="center" prop="y5order">
            <template slot-scope="scope">
              <span v-if="scope.row.y5avg<=0"></span>
              <span v-if="scope.row.y5avg>0">{{ scope.row.y5avg }}万</span>
            </template>
          </el-table-column>
          <el-table-column label="三年前" align="center" prop="y4order">
            <template slot-scope="scope">
              <span v-if="scope.row.y4avg<=0"></span>
              <span v-if="scope.row.y4avg>0">{{ scope.row.y4avg }}万</span>
            </template>
          </el-table-column>
          <el-table-column label="两年前" align="center" prop="y3order">
            <template slot-scope="scope">
              <span v-if="scope.row.y3avg<=0"></span>
              <span v-if="scope.row.y3avg>0">{{ scope.row.y3avg }}万</span>
            </template>
          </el-table-column>
          <el-table-column label="一年前" align="center" prop="y2order">
            <template slot-scope="scope">
              <span v-if="scope.row.y2avg<=0"></span>
              <span v-if="scope.row.y2avg>0">{{ scope.row.y2avg }}万</span>
            </template>
          </el-table-column>
          <el-table-column label="近一年" align="center" prop="y1order">
            <template slot-scope="scope">
              <span v-if="scope.row.y1avg<=0"></span>
              <span v-if="scope.row.y1avg>0">{{ scope.row.y1avg }}万</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="下单合计" align="center">
          <el-table-column label="四年前" align="center" prop="y5order">
            <template slot-scope="scope">
              <span v-if="scope.row.y5money<=0"></span>
              <span v-if="scope.row.y5money>0">{{ scope.row.y5money }}万</span>
            </template>
          </el-table-column>
          <el-table-column label="三年前" align="center" prop="y4order">
            <template slot-scope="scope">
              <span v-if="scope.row.y4money<=0"></span>
              <span v-if="scope.row.y4money>0">{{ scope.row.y4money }}万</span>
            </template>
          </el-table-column>
          <el-table-column label="两年前" align="center" prop="y3order">
            <template slot-scope="scope">
              <span v-if="scope.row.y3money<=0"></span>
              <span v-if="scope.row.y3money>0">{{ scope.row.y3money }}万</span>
            </template>
          </el-table-column>
          <el-table-column label="一年前" align="center" prop="y2order">
            <template slot-scope="scope">
              <span v-if="scope.row.y2money<=0"></span>
              <span v-if="scope.row.y2money>0">{{ scope.row.y2money }}万</span>
            </template>
          </el-table-column>
          <el-table-column label="近一年" align="center" prop="y1order">
            <template slot-scope="scope">
              <span v-if="scope.row.y1money<=0"></span>
              <span v-if="scope.row.y1money>0">{{ scope.row.y1money }}万</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>

      <center>
        <el-button title="上一页" circle plain type="primary" style="margin-top: 5px;" :disabled="detailList.length==0||queryParams2.pageNo==1" @click="showPre1"> << </el-button>
        <el-button title="下一页" circle plain type="primary" style="margin-top: 5px;margin-left: 10px;" :disabled="queryParams2.pageNo>=queryParams2.totalPage" @click="showNext1"> >> </el-button>
        <span style="margin-left: 10px;">
          [第<span style="color:red;">{{ queryParams2.pageNo }}</span>页，每页<span style="color:red;">{{ queryParams2.pageSize }}</span>条记录，共<span style="color:red;">{{ totalRecord }}</span>条记录]
        </span>
      </center>
    </el-card>

    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-card style="margin-top: -35px;">
        <div slot="header" class="clearfix">
          <span style="font-weight: bold;color: #0099ff;font-size: 16px;">客户补充信息</span>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item>
            <template slot="label">客户名字</template>
            <span style="font-size: 20px;font-weight: bold;color: blue;">{{ extraInfo.kh_name }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">客户标识</template>
            {{ extraInfo.kh_id }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">联系方式</template>
            {{ extraInfo.ms }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">归属片区</template>
            {{ extraInfo.dpt }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">种植亩数</template>
            {{ extraInfo.cphone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">种植匹配度</template>
            <span>{{ extraInfo.zzppd }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">客户标签</template>
            <span>{{ extraInfo.yzkh }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-card style="margin-top: 10px;">
        <div slot="header" class="clearfix">
          <span style="font-weight: bold;color: #0099ff;font-size: 16px;">购买明细(产品维度)</span>
        </div>
        <el-table :data="detailInfo" border stripe style="width: 100%;">
          <el-table-column label="产品名称" align="center" prop="pname">
            <template slot-scope="scope">
              {{ scope.row.pname }}
            </template>
          </el-table-column>
          <el-table-column label="订单状态" align="center" prop="ddstate" width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.ddstate=='t'">退单</span>
              <span v-if="scope.row.ddstate=='z'">正常</span>
            </template>
          </el-table-column>
          <el-table-column label="订单数" align="center">
            <el-table-column label="四年前" align="center" prop="y5order" width="60">
              <template slot-scope="scope">
                <span v-if="scope.row.y5order=='0'"></span>
                <span v-if="scope.row.y5order!='0'">{{ scope.row.y5order }}</span>
              </template>
            </el-table-column>
            <el-table-column label="三年前" align="center" prop="y4order" width="60">
              <template slot-scope="scope">
                <span v-if="scope.row.y4order=='0'"></span>
                <span v-if="scope.row.y4order!='0'">{{ scope.row.y4order }}</span>
              </template>
            </el-table-column>
            <el-table-column label="两年前" align="center" prop="y3order" width="60">
              <template slot-scope="scope">
                <span v-if="scope.row.y3order=='0'"></span>
                <span v-if="scope.row.y3order!='0'">{{ scope.row.y3order }}</span>
              </template>
            </el-table-column>
            <el-table-column label="一年前" align="center" prop="y2order" width="60">
              <template slot-scope="scope">
                <span v-if="scope.row.y2order=='0'"></span>
                <span v-if="scope.row.y2order!='0'">{{ scope.row.y2order }}</span>
              </template>
            </el-table-column>
            <el-table-column label="近一年" align="center" prop="y1order" width="60">
              <template slot-scope="scope">
                <span v-if="scope.row.y1order=='0'"></span>
                <span v-if="scope.row.y1order!='0'">{{ scope.row.y1order }}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="平均成交单价" align="center">
            <el-table-column label="四年前" align="center" prop="y5avg" width="80">
              <template slot-scope="scope">
                <span v-if="scope.row.y5avg<=0"></span>
                <span v-if="scope.row.y5avg>0">{{ scope.row.y5avg }}万</span>
              </template>
            </el-table-column>
            <el-table-column label="三年前" align="center" prop="y4avg" width="80">
              <template slot-scope="scope">
                <span v-if="scope.row.y4avg<=0"></span>
                <span v-if="scope.row.y4avg>0">{{ scope.row.y4avg }}万</span>
              </template>
            </el-table-column>
            <el-table-column label="两年前" align="center" prop="y3avg" width="80">
              <template slot-scope="scope">
                <span v-if="scope.row.y3avg<=0"></span>
                <span v-if="scope.row.y3avg>0">{{ scope.row.y3avg }}万</span>
              </template>
            </el-table-column>
            <el-table-column label="一年前" align="center" prop="y2avg" width="80">
              <template slot-scope="scope">
                <span v-if="scope.row.y2avg<=0"></span>
                <span v-if="scope.row.y2avg>0">{{ scope.row.y2avg }}万</span>
              </template>
            </el-table-column>
            <el-table-column label="近一年" align="center" prop="y1avg" width="80">
              <template slot-scope="scope">
                <span v-if="scope.row.y1avg<=0"></span>
                <span v-if="scope.row.y1avg>0">{{ scope.row.y1avg }}万</span>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-card>

      <el-card style="margin-top: 10px;">
        <div slot="header" class="clearfix">
          <span style="font-weight: bold;color: #0099ff;font-size: 16px;">下单汇总</span>
        </div>
        <el-table :data="orderSummary" border stripe style="width: 100%;">
          <el-table-column label="下单金额汇总" align="center">
            <el-table-column label="品类" align="center" prop="brand"></el-table-column>
            <el-table-column label="四年前" align="center" prop="y5money"></el-table-column>
            <el-table-column label="三年前" align="center" prop="y4money"></el-table-column>
            <el-table-column label="两年前" align="center" prop="y3money"></el-table-column>
            <el-table-column label="一年前" align="center" prop="y2money"></el-table-column>
            <el-table-column label="近一年" align="center" prop="y1money"></el-table-column>
            <el-table-column label="总和" align="center" prop="totalmoneys"></el-table-column>
          </el-table-column>
        </el-table>

        <el-table :data="orderSummary" border stripe style="width: 100%;margin-top: 5px;">
          <el-table-column label="下单数量汇总" align="center">
            <el-table-column label="品类" align="center" prop="brand"></el-table-column>
            <el-table-column label="四年前" align="center" prop="y5order"></el-table-column>            
            <el-table-column label="三年前" align="center" prop="y4order"></el-table-column>            
            <el-table-column label="两年前" align="center" prop="y3order"></el-table-column>            
            <el-table-column label="一年前" align="center" prop="y2order"></el-table-column>
            <el-table-column label="近一年" align="center" prop="y1order"></el-table-column>
            <el-table-column label="总和" align="center" prop="totalorders"></el-table-column>
          </el-table-column>
        </el-table>

        <el-table :data="refundSummary" border stripe style="width: 100%;margin-top: 5px;">
          <el-table-column label="退单金额汇总" align="center">
            <el-table-column label="品类" align="center" prop="brand"></el-table-column>
            <el-table-column label="四年前" align="center" prop="y5money"></el-table-column>
            <el-table-column label="三年前" align="center" prop="y4money"></el-table-column>
            <el-table-column label="两年前" align="center" prop="y3money"></el-table-column>
            <el-table-column label="一年前" align="center" prop="y2money"></el-table-column>
            <el-table-column label="近一年" align="center" prop="y1money"></el-table-column>
            <el-table-column label="总和" align="center" prop="totalmoneys"></el-table-column>
          </el-table-column>
        </el-table>

        <el-table :data="refundSummary" border stripe style="width: 100%;margin-top: 5px;">
          <el-table-column label="退单数量汇总" align="center">
            <el-table-column label="品类" align="center" prop="brand"></el-table-column>
            <el-table-column label="四年前" align="center" prop="y5order"></el-table-column>            
            <el-table-column label="三年前" align="center" prop="y4order"></el-table-column>            
            <el-table-column label="两年前" align="center" prop="y3order"></el-table-column>            
            <el-table-column label="一年前" align="center" prop="y2order"></el-table-column>
            <el-table-column label="近一年" align="center" prop="y1order"></el-table-column>
            <el-table-column label="总和" align="center" prop="totalorders"></el-table-column>
          </el-table-column>
        </el-table>

      </el-card>

      <el-card style="margin-top: 10px;">
        <div slot="header" class="clearfix">
          <span style="font-weight: bold;color: #0099ff;font-size: 16px;">各周期标签</span>
        </div>
        <el-descriptions title="客户资质划分规则" direction="vertical" :column="7" border>
          <el-descriptions-item label="青铜">- <el-button circle style="background:#76B7B2;"></el-button></el-descriptions-item>
          <el-descriptions-item label="白银">>=5K元 <el-button circle style="background:#4E79A7;"></el-button></el-descriptions-item>
          <el-descriptions-item label="黄金">>=2W元 <el-button circle style="background:#E15759;"></el-button></el-descriptions-item>
          <el-descriptions-item label="铂金">>=4W元 <el-button circle style="background:#F28E2B;"></el-button></el-descriptions-item>
          <el-descriptions-item label="钻石">>=8W元 <el-button circle style="background:#B07AA1;"></el-button></el-descriptions-item>
          <el-descriptions-item label="星耀">>=15W元 <el-button circle style="background:#EDC948;"></el-button></el-descriptions-item>
          <el-descriptions-item label="王者">>=30W元 <el-button circle style="background:#59A14F;"></el-button></el-descriptions-item>
        </el-descriptions>
        <div ref="chart20" style="width: 100%;height:400px;margin-top:5px;"></div>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import { listCusAnyliseInit,listAnlyseBrandInit,listAnlyseDetailInit,listFgData,listFgBrandData,listKhAnlyseDetailData,listCusDetailInfo } from "@/api/system/sales/dpt/api";
import * as echarts from 'echarts';
export default {
  name: "Xsbkhfx",
  data() {
    return {
      bigdpts: [],
      dpts: [],
      dptclss: [],
      bigdpts1: [],
      dpts1: [],
      dptclss1: [],
      brands1: [],
      bigdpts2: [],
      dpts2: [],
      dptclss2: [],
      brands2: [],
      ddstates2: [],
      queryFlag: true,
      queryFlag1: true,
      queryFlag2: true,
      queryParams: {
        bigdpt: null,
        dpt: null,
        dptcls: null,
        brand: null,
        kh_name: "",
        ddstate: null,
      },
      queryParams1: {
        bigdpt: null,
        dpt: null,
        dptcls: null,
        brand: null,
        kh_name: "",
        ddstate: null,
      },
      queryParams2: {
        bigdpt: null,
        dpt: null,
        dptcls: null,
        brand: null,
        kh_name: "",
        ddstate: null,
        pageNo:1,
        pageSize:10,
        totalPage:0,
        kh_id: null,
      },
      detailList: [],
      totalRecord: 0,
      title:"",
      open: false,
      extraInfo: {},
      detailInfo: [],
      orderSummary: [],
      refundSummary: [],
      rankcolor:
      [{
        value: "青铜客户",
        label: "#76B7B2"
      },{
        value: "白银客户",
        label: "#4E79A7"
      },{
        value: "黄金客户",
        label: "#E15759"
      },{
        value: "铂金客户",
        label: "#F28E2B"
      },{
        value: "钻石客户",
        label: "#B07AA1"
      },{
        value: "星耀客户",
        label: "#EDC948"
      },{
        value: "王者客户",
        label: "#59A14F"
      },],
    }
  },
  created() {
    this.getInitData();
  },
  mounted(){
    
  },
  methods: {
    showKhInfo(row){
      this.queryParams2.kh_id = row.kh_id;
      listCusDetailInfo(this.queryParams2).then(res =>{
        this.extraInfo = res.data.extraInfo;
        this.detailInfo = res.data.detailInfo;
        this.orderSummary = res.data.orderSummary;
        this.refundSummary = res.data.refundSummary;
        this.title = "客户详细信息";
        this.open = true;
        const labels7 = [];
        let colors = [];
        if(res.data.rankSummary.length>0){
          for(let i=0;i<res.data.rankSummary.length;i++){
            labels7.push(res.data.rankSummary[i].sdmc);
            for(let y=0;y<this.rankcolor.length;y++){
              if(this.rankcolor[y].value==res.data.rankSummary[i].vipcn){
                colors.push(this.rankcolor[y].label);
              }
            }
          }
        }
        setTimeout(() => {
          const chart20 = echarts.init(this.$refs.chart20);
          const option20 = {
            tooltip: {
              trigger: 'axis',
              formatter: function (params) {
                return params[0].data.extraInfo
              }
            },
            xAxis: {
              type: 'category',
              data: labels7
            },
            yAxis: {
              type: 'value'
            },
            series: [
            {
              data:res.data.rankSummary.map(item => ({
                value: item.vipn,
                name: item.sdmc,
                extraInfo: "统计时段："+item.sdmc+"<br/>下单金额："+item.vipn+"元<br/>客户资质："+item.vipcn,
                extraInfo1: item.vipn+"元\n"+item.vipcn
              })),
              type: 'bar',
              label: {
                show: true, // 显示标签
                position: 'top', // 标签位置
                fontSize: 12,
                fontWeight: 'bold',
                formatter: function (params) {
                  return params.data.extraInfo1
                }
              },
              itemStyle: {
                color: function(params) {
                  // 颜色数组
                  const colorList = colors;
                  // 根据数据索引返回对应颜色
                  return colorList[params.dataIndex % colorList.length];
                }
              },
            }
            ]
        };
        chart20.setOption(option20);
        }, 2000);
        
      })
    },
    handleChange(){
      this.getData();
    },
    handleChange1(){
      this.getBrandData();
    },
    handleChange2(){
      this.getDetailData();
    },
    showPre1(){
      this.queryParams2.pageNo = this.queryParams2.pageNo-1;
      this.getDetailData();
    },
    showNext1(){
      this.queryParams2.pageNo = this.queryParams2.pageNo+1;
      this.getDetailData();
    },
    getInitData(){
      listCusAnyliseInit().then(res =>{
        this.queryFlag = res.data.queryFlag;
        this.bigdpts = res.data.bigdpts;
        this.dpts = res.data.dpts;
        this.dptclss = res.data.dptclss;
        this.queryParams.bigdpt = res.data.bigdpt;
        this.queryParams.dpt = res.data.dpt;
        this.queryParams.dptcls = res.data.dptcls;
        this.getData();
      })
      listAnlyseBrandInit().then(res =>{
        this.queryFlag1 = res.data.queryFlag;
        this.bigdpts1 = res.data.bigdpts;
        this.dpts1 = res.data.dpts;
        this.dptclss1 = res.data.dptclss;
        this.brands1 = res.data.brands;
        this.queryParams1.bigdpt = res.data.bigdpt;
        this.queryParams1.dpt = res.data.dpt;
        this.queryParams1.dptcls = res.data.dptcls;
        this.queryParams1.brand = res.data.brand;
        this.getBrandData();
      })

      listAnlyseDetailInit().then(res =>{
        this.queryFlag2 = res.data.queryFlag;
        this.bigdpts2 = res.data.bigdpts;
        this.dpts2 = res.data.dpts;
        this.dptclss2 = res.data.dptclss;
        this.brands2 = res.data.brands;
        this.ddstates2 = res.data.ddstates;

        this.queryParams2.bigdpt = res.data.bigdpt;
        this.queryParams2.dpt = res.data.dpt;
        this.queryParams2.dptcls = res.data.dptcls;
        this.queryParams2.brand = res.data.brand;
        this.queryParams2.ddstate = res.data.ddstate;
        this.queryParams2.kh_name = res.data.kh_name;
        this.getDetailData();
      })
    },
    getDetailData(){
      listKhAnlyseDetailData(this.queryParams2).then(res =>{
        this.detailList = res.data.list;
        this.queryParams2.totalPage = res.data.totalPage;
        this.queryParams2.pageNo = res.data.pageNo;
        this.queryParams2.pageSize = res.data.pageSize;
        this.totalRecord = res.data.totalRecord;
      })
    },
    getBrandData(){
      listFgBrandData(this.queryParams1).then(res =>{
        let labels = [];
        if(res.data.length>0){
          for(let i=0;i<res.data.length;i++){
            labels.push(res.data[i].sdmc);
          }
        }
        let labels1 = [];
        let datainfo = [];
        if(res.data.length>0){
          for(let i=res.data.length-1;i>=0;i--){
            labels1.push(res.data[i].sdmc);
            datainfo.push(res.data[i]);
          }
        }

        const chart12 = echarts.init(this.$refs.chart12);
        const option12 = {
          title: {
            text: '下单率&复购率走势(细化到一级品类)', // 主标题
            left: 'center',          // 水平居中
            bottom: 0,                  // 离画布上边 8px
            textStyle: {
              fontSize: 12,
              fontWeight:'normal'
            } 
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              return params[0].data.extraInfo
            }
          },
          legend: {
            data: ['下单率', '复购率'],
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: labels1,
            axisLabel: {
              rotate: 90, // 设置 X 轴文字旋转角度
              interval: 0, // 强制显示所有标签
              fontSize: 12, // 文字大小
              color: '#333' // 文字颜色
            }
          },
          yAxis: {
            type: 'value',
            show: false,
          },
          series: [
            {
              name: '下单率',
              type: 'line',
              data: datainfo.map(item => ({
                value: item.xdlv,
                name: item.sdmc,
                extraInfo: "统计时段：<span style='color:#0000FF;'>"+item.sdmc+"</span><br/>客户基数：<span style='color:#0000FF;'>"+item.khjs+"人</span><br /> 复购人数：<span style='color:#0000FF;'>"+item.fgrs+"人</span><br />下单人数：<span style='color:#0000FF;'>"+item.xdrs+"人</span><br />复购率: <span style='color:#0000FF;'>"+item.fglv+"%</span><br />下单率: <span style='color:#0000FF;'>"+item.xdlv+"%</span>",
              })),
              label: {
                show: true, // 显示标签
                position: 'top', // 标签位置
                formatter: '{c}%' // 标签内容格式化为数据值
              },
              itemStyle: {
                color: '#EDC948'
              },
            },
            {
              name: '复购率',
              type: 'line',
              data: datainfo.map(item => ({
                value: item.fglv,
                name: item.sdmc,
                extraInfo: "统计时段：<span style='color:#0000FF;'>"+item.sdmc+"</span><br/>客户基数：<span style='color:#0000FF;'>"+item.khjs+"人</span><br /> 复购人数：<span style='color:#0000FF;'>"+item.fgrs+"人</span><br />下单人数：<span style='color:#0000FF;'>"+item.xdrs+"人</span><br />复购率: <span style='color:#0000FF;'>"+item.fglv+"%</span><br />下单率: <span style='color:#0000FF;'>"+item.xdlv+"%</span>",
              })),
              label: {
                show: true, // 显示标签
                position: 'top', // 标签位置
                formatter: '{c}%' // 标签内容格式化为数据值
              },
              itemStyle: {
                color: '#B07AA1'
              },
            }
          ]
        };
        chart12.setOption(option12);

        const chart11 = echarts.init(this.$refs.chart11);
        const option11 = {
          title: {
            text: '下单率', // 主标题
            left: 'center',          // 水平居中
            bottom: 8,     
            textStyle: {
              fontSize: 12,
              fontWeight:'normal'
            }            
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              return params[0].data.extraInfo
            }
          },
          grid: {
            left: '1%',
            right: '10%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            show: false,
          },
          yAxis: {
            type: 'category',
            data: labels,
          },
          series: [
            {
              type: 'bar',
              data: res.data.map(item => ({
                value: item.xdlv,
                name: item.sdmc,
                extraInfo: "统计时段：<span style='color:#0000FF;'>"+item.sdmc+"</span><br/>客户基数：<span style='color:#0000FF;'>"+item.khjs+"人</span><br /> 复购人数：<span style='color:#0000FF;'>"+item.fgrs+"人</span><br />下单人数：<span style='color:#0000FF;'>"+item.xdrs+"人</span><br />复购率: <span style='color:#0000FF;'>"+item.fglv+"%</span><br />下单率: <span style='color:#0000FF;'>"+item.xdlv+"%</span>",
              })),
              itemStyle: {
                color: '#E799B3'
              },
              label: {
                show: true, // 显示标签
                position: 'right', // 标签位置
                formatter: '{c}%' // 标签内容格式化为数据值
              }
            }
          ]
        };
        chart11.setOption(option11);

        const chart10 = echarts.init(this.$refs.chart10);
        const option10 = {
          title: {
            text: '复购率', // 主标题
            left: 'center',          // 水平居中
            bottom: 8,     
            textStyle: {
              fontSize: 12,
              fontWeight:'normal'
            }            
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                return params[0].data.extraInfo
            }
          },
          grid: {
            left: '1%',
            right: '10%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            show: false,
          },
          yAxis: {
            type: 'category',
            data: labels,
          },
          series: [
            {
              type: 'bar',
              data: res.data.map(item => ({
                value: item.fglv,
                name: item.sdmc,
                extraInfo: "统计时段：<span style='color:#0000FF;'>"+item.sdmc+"</span><br/>客户基数：<span style='color:#0000FF;'>"+item.khjs+"人</span><br /> 复购人数：<span style='color:#0000FF;'>"+item.fgrs+"人</span><br />下单人数：<span style='color:#0000FF;'>"+item.xdrs+"人</span><br />复购率: <span style='color:#0000FF;'>"+item.fglv+"%</span><br />下单率: <span style='color:#0000FF;'>"+item.xdlv+"%</span>",
              })),
              itemStyle: {
                color: '#69AAA5'
              },
              label: {
                show: true, // 显示标签
                position: 'right', // 标签位置
                formatter: '{c}%' // 标签内容格式化为数据值
              }
            }
          ]
        };
        chart10.setOption(option10);

        const chart9 = echarts.init(this.$refs.chart9);
        const option9 = {
          title: {
            text: '下单人数', // 主标题
            left: 'center',          // 水平居中
            bottom: 8,   
            textStyle: {
              fontSize: 12,
              fontWeight:'normal'
            }                
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                return params[0].data.extraInfo
            }
          },
          grid: {
            left: '1%',
            right: '10%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            show: false,
          },
          yAxis: {
            type: 'category',
            data: labels,
          },
          series: [
            {
              type: 'bar',
              data: res.data.map(item => ({
                value: item.xdrs,
                name: item.sdmc,
                extraInfo: "统计时段：<span style='color:#0000FF;'>"+item.sdmc+"</span><br/>客户基数：<span style='color:#0000FF;'>"+item.khjs+"人</span><br /> 复购人数：<span style='color:#0000FF;'>"+item.fgrs+"人</span><br />下单人数：<span style='color:#0000FF;'>"+item.xdrs+"人</span><br />复购率: <span style='color:#0000FF;'>"+item.fglv+"%</span><br />下单率: <span style='color:#0000FF;'>"+item.xdlv+"%</span>",
              })),
              itemStyle: {
                color: '#D1b247'
              },
              label: {
                show: true, // 显示标签
                position: 'right', // 标签位置
                formatter: '{c}人' // 标签内容格式化为数据值
              }
            }
          ]
        };
        chart9.setOption(option9);

        const chart8 = echarts.init(this.$refs.chart8);
        const option8 = {
          title: {
            text: '复购人数', // 主标题
            left: 'center',          // 水平居中
            bottom: 8,                  // 离画布上边 8px
            textStyle: {
              fontSize: 12,
              fontWeight:'normal'
            } 
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                return params[0].data.extraInfo
            }
          },
          grid: {
            left: '1%',
            right: '10%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            show: false,
          },
          yAxis: {
            type: 'category',
            data: labels,
          },
          series: [
            {
              type: 'bar',
              data: res.data.map(item => ({
                value: item.fgrs,
                name: item.sdmc,
                extraInfo: "统计时段：<span style='color:#0000FF;'>"+item.sdmc+"</span><br/>客户基数：<span style='color:#0000FF;'>"+item.khjs+"人</span><br /> 复购人数：<span style='color:#0000FF;'>"+item.fgrs+"人</span><br />下单人数：<span style='color:#0000FF;'>"+item.xdrs+"人</span><br />复购率: <span style='color:#0000FF;'>"+item.fglv+"%</span><br />下单率: <span style='color:#0000FF;'>"+item.xdlv+"%</span>",
              })),
              itemStyle: {
                color: '#FFBE7D'
              },
              label: {
                show: true, // 显示标签
                position: 'right', // 标签位置
                formatter: '{c}人' // 标签内容格式化为数据值
              }
            }
          ]
        };
        chart8.setOption(option8);

        const chart7 = echarts.init(this.$refs.chart7);
        const option7 = {
          title: {
            text: '客户基数', // 主标题
            left: 'center',          // 水平居中
            bottom: 8,                  // 离画布上边 8px
            textStyle: {
              fontSize: 12,
              fontWeight:'normal'
            } 
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                return params[0].data.extraInfo
            }
          },
          grid: {
            left: '1%',
            right: '10%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            show: false,
          },
          yAxis: {
            type: 'category',
            data: labels,
          },
          series: [
            {
              type: 'bar',
              data: res.data.map(item => ({
                value: item.khjs,
                name: item.sdmc,
                extraInfo: "统计时段：<span style='color:#0000FF;'>"+item.sdmc+"</span><br/>客户基数：<span style='color:#0000FF;'>"+item.khjs+"人</span><br /> 复购人数：<span style='color:#0000FF;'>"+item.fgrs+"人</span><br />下单人数：<span style='color:#0000FF;'>"+item.xdrs+"人</span><br />复购率: <span style='color:#0000FF;'>"+item.fglv+"%</span><br />下单率: <span style='color:#0000FF;'>"+item.xdlv+"%</span>",
              })),
              itemStyle: {
                color: '#59A14F'
              },
              label: {
                show: true, // 显示标签
                position: 'right', // 标签位置
                formatter: '{c}人' // 标签内容格式化为数据值
              }
            }
          ]
      };
      chart7.setOption(option7);
      })
    },
    getData(){
      listFgData(this.queryParams).then(res=>{
        let labels = [];
        if(res.data.length>0){
          for(let i=0;i<res.data.length;i++){
            labels.push(res.data[i].sdmc);
          }
        }
        let labels1 = [];
        let datainfo = [];
        if(res.data.length>0){
          for(let i=res.data.length-1;i>=0;i--){
            labels1.push(res.data[i].sdmc);
            datainfo.push(res.data[i]);
          }
        }
        const chart6 = echarts.init(this.$refs.chart6);
        const option6 = {
          title: {
            text: '下单率&复购率走势', // 主标题
            left: 'center',          // 水平居中
            bottom: 0,                  // 离画布上边 8px
            textStyle: {
              fontSize: 12,
              fontWeight:'normal'
            } 
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              return params[0].data.extraInfo
            }
          },
          legend: {
            data: ['下单率', '复购率'],
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: labels1,
            axisLabel: {
              rotate: 90, // 设置 X 轴文字旋转角度
              interval: 0, // 强制显示所有标签
              fontSize: 12, // 文字大小
              color: '#333' // 文字颜色
            }
          },
          yAxis: {
            type: 'value',
            show: false,
          },
          series: [
            {
              name: '下单率',
              type: 'line',
              data: datainfo.map(item => ({
                value: item.xdlv,
                name: item.sdmc,
                extraInfo: "统计时段：<span style='color:#0000FF;'>"+item.sdmc+"</span><br/>客户基数：<span style='color:#0000FF;'>"+item.khjs+"人</span><br /> 复购人数：<span style='color:#0000FF;'>"+item.fgrs+"人</span><br />下单人数：<span style='color:#0000FF;'>"+item.xdrs+"人</span><br />复购率: <span style='color:#0000FF;'>"+item.fglv+"%</span><br />下单率: <span style='color:#0000FF;'>"+item.xdlv+"%</span>",
              })),
              label: {
                show: true, // 显示标签
                position: 'top', // 标签位置
                formatter: '{c}%' // 标签内容格式化为数据值
              },
              itemStyle: {
                color: '#EDC948'
              },
            },
            {
              name: '复购率',
              type: 'line',
              data: datainfo.map(item => ({
                value: item.fglv,
                name: item.sdmc,
                extraInfo: "统计时段：<span style='color:#0000FF;'>"+item.sdmc+"</span><br/>客户基数：<span style='color:#0000FF;'>"+item.khjs+"人</span><br /> 复购人数：<span style='color:#0000FF;'>"+item.fgrs+"人</span><br />下单人数：<span style='color:#0000FF;'>"+item.xdrs+"人</span><br />复购率: <span style='color:#0000FF;'>"+item.fglv+"%</span><br />下单率: <span style='color:#0000FF;'>"+item.xdlv+"%</span>",
              })),
              label: {
                show: true, // 显示标签
                position: 'top', // 标签位置
                formatter: '{c}%' // 标签内容格式化为数据值
              },
              itemStyle: {
                color: '#B07AA1'
              },
            }
          ]
        };
        chart6.setOption(option6);

        const chart5 = echarts.init(this.$refs.chart5);
        const option5 = {
          title: {
            text: '下单率', // 主标题
            left: 'center',          // 水平居中
            bottom: 8,     
            textStyle: {
              fontSize: 12,
              fontWeight:'normal'
            }            
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              return params[0].data.extraInfo
            }
          },
          grid: {
            left: '1%',
            right: '10%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            show: false,
          },
          yAxis: {
            type: 'category',
            data: labels,
          },
          series: [
            {
              type: 'bar',
              data: res.data.map(item => ({
                value: item.xdlv,
                name: item.sdmc,
                extraInfo: "统计时段：<span style='color:#0000FF;'>"+item.sdmc+"</span><br/>客户基数：<span style='color:#0000FF;'>"+item.khjs+"人</span><br /> 复购人数：<span style='color:#0000FF;'>"+item.fgrs+"人</span><br />下单人数：<span style='color:#0000FF;'>"+item.xdrs+"人</span><br />复购率: <span style='color:#0000FF;'>"+item.fglv+"%</span><br />下单率: <span style='color:#0000FF;'>"+item.xdlv+"%</span>",
              })),
              itemStyle: {
                color: '#E799B3'
              },
              label: {
                show: true, // 显示标签
                position: 'right', // 标签位置
                formatter: '{c}%' // 标签内容格式化为数据值
              }
            }
          ]
        };
        chart5.setOption(option5);

        const chart4 = echarts.init(this.$refs.chart4);
        const option4 = {
          title: {
            text: '复购率', // 主标题
            left: 'center',          // 水平居中
            bottom: 8,     
            textStyle: {
              fontSize: 12,
              fontWeight:'normal'
            }            
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                return params[0].data.extraInfo
            }
          },
          grid: {
            left: '1%',
            right: '10%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            show: false,
          },
          yAxis: {
            type: 'category',
            data: labels,
          },
          series: [
            {
              type: 'bar',
              data: res.data.map(item => ({
                value: item.fglv,
                name: item.sdmc,
                extraInfo: "统计时段：<span style='color:#0000FF;'>"+item.sdmc+"</span><br/>客户基数：<span style='color:#0000FF;'>"+item.khjs+"人</span><br /> 复购人数：<span style='color:#0000FF;'>"+item.fgrs+"人</span><br />下单人数：<span style='color:#0000FF;'>"+item.xdrs+"人</span><br />复购率: <span style='color:#0000FF;'>"+item.fglv+"%</span><br />下单率: <span style='color:#0000FF;'>"+item.xdlv+"%</span>",
              })),
              itemStyle: {
                color: '#69AAA5'
              },
              label: {
                show: true, // 显示标签
                position: 'right', // 标签位置
                formatter: '{c}%' // 标签内容格式化为数据值
              }
            }
          ]
        };
        chart4.setOption(option4);

        const chart3 = echarts.init(this.$refs.chart3);
        const option3 = {
          title: {
            text: '下单人数', // 主标题
            left: 'center',          // 水平居中
            bottom: 8,   
            textStyle: {
              fontSize: 12,
              fontWeight:'normal'
            }                
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                return params[0].data.extraInfo
            }
          },
          grid: {
            left: '1%',
            right: '10%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            show: false,
          },
          yAxis: {
            type: 'category',
            data: labels,
          },
          series: [
            {
              type: 'bar',
              data: res.data.map(item => ({
                value: item.xdrs,
                name: item.sdmc,
                extraInfo: "统计时段：<span style='color:#0000FF;'>"+item.sdmc+"</span><br/>客户基数：<span style='color:#0000FF;'>"+item.khjs+"人</span><br /> 复购人数：<span style='color:#0000FF;'>"+item.fgrs+"人</span><br />下单人数：<span style='color:#0000FF;'>"+item.xdrs+"人</span><br />复购率: <span style='color:#0000FF;'>"+item.fglv+"%</span><br />下单率: <span style='color:#0000FF;'>"+item.xdlv+"%</span>",
              })),
              itemStyle: {
                color: '#D1b247'
              },
              label: {
                show: true, // 显示标签
                position: 'right', // 标签位置
                formatter: '{c}人' // 标签内容格式化为数据值
              }
            }
          ]
        };
        chart3.setOption(option3);

        const chart2 = echarts.init(this.$refs.chart2);
        const option2 = {
          title: {
            text: '复购人数', // 主标题
            left: 'center',          // 水平居中
            bottom: 8,                  // 离画布上边 8px
            textStyle: {
              fontSize: 12,
              fontWeight:'normal'
            } 
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              return params[0].data.extraInfo
            }
          },
          grid: {
            left: '1%',
            right: '10%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            show: false,
          },
          yAxis: {
            type: 'category',
            data: labels,
          },
          series: [
            {
              type: 'bar',
              data: res.data.map(item => ({
                value: item.fgrs,
                name: item.sdmc,
                extraInfo: "统计时段：<span style='color:#0000FF;'>"+item.sdmc+"</span><br/>客户基数：<span style='color:#0000FF;'>"+item.khjs+"人</span><br /> 复购人数：<span style='color:#0000FF;'>"+item.fgrs+"人</span><br />下单人数：<span style='color:#0000FF;'>"+item.xdrs+"人</span><br />复购率: <span style='color:#0000FF;'>"+item.fglv+"%</span><br />下单率: <span style='color:#0000FF;'>"+item.xdlv+"%</span>",
              })),
              itemStyle: {
                color: '#FFBE7D'
              },
              label: {
                show: true, // 显示标签
                position: 'right', // 标签位置
                formatter: '{c}人' // 标签内容格式化为数据值
              }
            }
          ]
        };
        chart2.setOption(option2);

        const chart1 = echarts.init(this.$refs.chart1);
        const option1 = {
          title: {
            text: '客户基数', // 主标题
            left: 'center',          // 水平居中
            bottom: 8,                  // 离画布上边 8px
            textStyle: {
              fontSize: 12,
              fontWeight:'normal'
            } 
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                return params[0].data.extraInfo
            }
          },
          grid: {
            left: '1%',
            right: '10%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            show: false,
          },
          yAxis: {
            type: 'category',
            data: labels,
          },
          series: [
            {
              type: 'bar',
              data: res.data.map(item => ({
                value: item.khjs,
                name: item.sdmc,
                extraInfo: "统计时段：<span style='color:#0000FF;'>"+item.sdmc+"</span><br/>客户基数：<span style='color:#0000FF;'>"+item.khjs+"人</span><br /> 复购人数：<span style='color:#0000FF;'>"+item.fgrs+"人</span><br />下单人数：<span style='color:#0000FF;'>"+item.xdrs+"人</span><br />复购率: <span style='color:#0000FF;'>"+item.fglv+"%</span><br />下单率: <span style='color:#0000FF;'>"+item.xdlv+"%</span>",
              })),
              itemStyle: {
                color: '#59A14F'
              },
              label: {
                show: true, // 显示标签
                position: 'right', // 标签位置
                formatter: '{c}人' // 标签内容格式化为数据值
              }
            }
          ]
      };
      chart1.setOption(option1);

      })
    },
  }
};

</script>
